<template>
	<view class="np-box">
		<view class="np-title">
			设置新密码
		</view>
		<view class="zdy-input">
			<input class="pwd-left" :password="isShowPwd" name="password" placeholder="请输入字母/数字/字符组成的6-16位密码"
				v-model="form.password" />
			<view class="iconfont " style="color: #a6a6a6;" :class="[isShowPwd?'icon-app-yulan-close':'icon-app-yulan-open']"
				@click="switchIcon()"></view>
		</view>
		<view class="zdy-input">
			<input class="pwd-left" :password="isNewShowPwd" name="sPassword" placeholder="请确认新密码"
				v-model="form.sPassword" />
			<view class="iconfont " style="color: #a6a6a6;" :class="[isNewShowPwd?'icon-app-yulan-close':'icon-app-yulan-open']"
				@click="switchIconNew()"></view>
		</view>
		<view class="np-btn">
			<button style="height: 96rpx;line-height: 96rpx;background: rgba(15, 83, 172, 1);font-size: 34rpx;" :disabled='disabled' @click="savePwd">确定</button>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.min.js';
	export default {
		data() {
			return {
				phone: '',
				disabled:false,
				form: {
					password: '',
					sPassword: ''
				},
				isShowPwd: true,
				isNewShowPwd: true,
			}
		},
		onLoad(options) {
			this.phone = options.phone
		},
		methods: {
			switchIcon() {
				this.isShowPwd = !this.isShowPwd;
			},
			switchIconNew() {
				this.isNewShowPwd = !this.isNewShowPwd;
			},
			savePwd() {
				let pwd = this.form.password
				let sPwd = this.form.sPassword
				this.disabled=true
				if(!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&.*]+$)[a-zA-Z\d!@#$%^&.*]{6,16}$/.test(pwd)){
					this.disabled=false
					return uni.$u.toast('请输入由字母/数字/字符组成的6-16位密码');
				}
				if (pwd !== sPwd) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					this.disabled=false
					return
				}
				let params = {
					userAccount: this.phone,
					userPwd: md5(this.form.password)
				}
				uni.$u.http.post(`/base/mobile/userInfo/forgetPwd`, params).then(res => {
					if (res.code === 0) {
						//这里清空数据
						uni.setStorageSync('userInfo', '');
						uni.showToast({
							title: '密码修改成功!',
							icon: 'none'
						});
						setTimeout(()=>{
							this.disabled=false
							uni.navigateTo({
								url: '/pages/subPackagesD/login/index'
							})
						},1000)
					}
				}).catch(()=>{
					this.disabled=false
				})
			}
		}
	}
</script>

<style lang="scss">
	.np-box {
		padding: 28rpx;
	}

	.np-title {
		font-weight: 500;
		color: #2B2B2B;
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.zdy-input {
		margin-bottom: 40rpx;
		font-size: 28rpx;
		border-radius: 6px;
		background: rgba(242, 242, 242, 1);
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;

		.pwd-left {
			width: 90%;
			font-size: 28rpx;
			height: 80rpx;
			background: rgba(242, 242, 242, 1);
			border: none;
		}

		.iconfont {
			font-size: 40rpx;
		}

	}

	.np-btn {
		margin-top: 24rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 6px;

		button {
			color: #fff;
			background: #0F53AC;
		}
	}
</style>